<template>
	<z-paging ref="paging" v-model="recordsData" @query="queryList" show-refresher-update-time>
		<template #top>
			<TitleBarVue :title="title"/>
			<view class="tabbar" :style="{'marginTop': titleTop}">
				<view :class="['item', ctype == 0? 'current':'']" @click="changType(0)">收藏</view>
				<view :class="['item', ctype == 1? 'current':'']" @click="changType(1)">赞过</view>
				<view :class="['item', ctype == 2? 'current':'']" @click="changType(2)">浏览</view>
			</view>
		</template>
		
		<!-- 空数据列表 -->
		<template #empty :empty-view-style="{'background':'#fff'}">
			<view class="w-100 d-flex d-flex-column d-flex-middle">
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/xiaoda.png" style="width: 80%;"></image>
				<text class="font-bold font30 d-flex-btn">{{ctype===0? '您暂时还没有收藏~' : ctype===1? '您暂时还没有赞过任何人~' : '您暂时还没有浏览记录~'}}~</text>
			</view>
		</template>
		
		<view class="main animated fadeIn faster" style="overflow: hidden;" v-if="recordsData.length!=0">
			<view class="px-1" v-if="ctype == 0">
				<view class="bg-fff rounded30 px-2 py-3">
					<view class="" v-if="recordsData.length!=0" v-for="(i, dex) in recordsData" :key="i.id">
						<view class="d-flex d-flex-middle d-flex-between mb-1">
							<view class="d-flex d-flex-middle">
								<view class="img-bg d-flex d-flex-center d-flex-middle mr-1" style="position: relative;">
									<image @click="touser(i.uid)" :src="i.avatar" class="img-bg-img" mode="aspectFill"></image>
									<image v-if="i.dressedVoMap && i.dressedVoMap['1']" class="avatar-frame" :src="i.dressedVoMap['1'].icon"></image>
								</view>
								<view>
									<view class="mb-1 font30">{{i.nickName}}</view>
									<view class="font24 color999">{{i.gmtCreated}}</view>
								</view>
							</view>
							<view class="d-flex d-flex-middle">
								<image v-if="i.collectFlag" @click="changeFavorStatus(dex,i.id,i.blogId)" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%94%B6%E8%97%8F-y.png" mode="widthFix" style="width: 40rpx; height: 40rpx;;"></image>
								<image v-if="!i.collectFlag" @click="changeFavorStatus(dex,i.id,i.blogId)" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%94%B6%E8%97%8F-c.png" mode="widthFix" style="width: 40rpx; height: 40rpx;;"></image>
							</view>
						</view>
						<view class="pb-2" style="padding-left: 120rpx;">
							<view class="font26 mb-2">{{i.remark}}</view>
							<view class="mb-2 d-flex">
								<image  v-if="i.screenshot1" 
										:src="i.screenshot1"
										@load="ImgSize($event, dex)"
										@click="previwImage(dex, 0)"
										:class="['rounded15',{'MorePic':i.screenshot2&&!i.screenshot3},{'threePic':i.screenshot2&&i.screenshot3}]"
										:mode="i.screenshot2? 'aspectFill' : 'widthFix'" 
										:style="[{maxWidth: i.isLongChart? '420rpx' : '550rpx'}]"
								></image>
								<image  :class="['rounded15', 'ml-1', i.screenshot2&&!i.screenshot3? 'MorePic' : 'threePic']"
										v-if="i.screenshot2" 
										:src="i.screenshot2" 
										mode="aspectFill"
										@click="previwImage(dex, 1)"
								></image>
								<image  :class="['rounded15', 'ml-1', 'mr-2', i.screenshot3? 'threePic' : '']"
										v-if="i.screenshot3" 
										:src="i.screenshot3" 
										mode="aspectFill"
										@click="previwImage(dex, 2)"
								></image>
							</view>
							<!-- <view class="d-flex mb-2">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E4%BD%8D%E7%BD%AE.png" mode="widthFix" style="width: 40rpx; height: 40rpx;"></image>
								<text style="color: #55b5f1;">大连市</text>
							</view> -->
							
							<view class="d-flex d-flex-middle pr-3 d-flex-between">
								<image class="ml-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%BD%AC%E5%8F%91.png" mode="widthFix" style="width: 26rpx; height: 26rpx;" @click="share(i)"></image>
								<view class="d-flex d-flex-middle">
									<image v-if="!i.favorFlag" @click="changeLikeStatus(dex,i.id,i.blogId)" class="ml-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%88%B1%E5%BF%83.png" mode="widthFix" style="width: 35rpx; height: 35rpx;"></image>
									<image v-if="i.favorFlag" @click="changeLikeStatus(dex,i.id,i.blogId)" class="ml-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/heart-3-fill.png" mode="widthFix" style="width: 35rpx; height: 35rpx;"></image>
									<text class="color71 font26 ml-1">{{i.blogFavorCount}}</text>
								</view>
								<view class="d-flex d-flex-middle" @click="gotoDetail(i)">
									<image class="ml-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%AF%84%E8%AE%BA.png" mode="widthFix" style="width: 35rpx; height: 35rpx;"></image>
									<text class="color71 font26" style="margin-bottom: 1px;">{{(i.commentCount&&i.commentCount!=0)? i.commentCount : ''}}评论</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="px-1" v-if="ctype == 1">
				<view class="bg-fff rounded30 px-2 py-3">
					<view v-if="recordsData.length!=0" v-for="(i, dex) in recordsData" :key="i.id">
						<view class="d-flex d-flex-middle d-flex-between mb-1">
							<view class="d-flex d-flex-middle">
								<view class="img-bg d-flex d-flex-center d-flex-middle mr-1" style="position: relative;">
									<image @click="touser(i.uid)" :src="i.avatar" class="img-bg-img" mode="aspectFill"></image>
									<image v-if="i.dressedVoMap && i.dressedVoMap['1']" class="avatar-frame" :src="i.dressedVoMap['1'].icon"></image>
								</view>
								<view>
									<view class="mb-1 font30">{{i.nickName}}</view>
									<view class="font24 color999">{{i.gmtCreated}}</view>
								</view>
							</view>
						</view>
						
						<view class="pb-2" style="padding-left: 120rpx;">
							<view class="font26 mb-2">{{i.remark}}</view>
							<view class="mb-2 d-flex">
								<image  v-if="i.screenshot1" 
										:src="i.screenshot1"
										@load="ImgSize($event, dex)"
										@click="previwImage(dex, 0)"
										:class="['rounded15',{'MorePic':i.screenshot2&&!i.screenshot3},{'threePic':i.screenshot2&&i.screenshot3}]"
										:mode="i.screenshot2? 'aspectFill' : 'widthFix'" 
										:style="[{maxWidth: i.isLongChart? '420rpx' : '550rpx'}]"
								></image>
								<image  :class="['rounded15', 'ml-1', i.screenshot2&&!i.screenshot3? 'MorePic' : 'threePic']" 
										v-if="i.screenshot2" 
										:src="i.screenshot2" 
										mode="aspectFill"
										@click="previwImage(dex, 1)"
								></image>
								<image  :class="['rounded15', 'ml-1', 'mr-2', i.screenshot3? 'threePic' : '']" 
										v-if="i.screenshot3" 
										:src="i.screenshot3" 
										mode="aspectFill"
										@click="previwImage(dex, 2)"
								></image>
							</view>
							
							<!-- <view @click="gotoPromotion" class="aixin rounded30 px-1 py-1 d-flex d-flex-middle mb-2">
								<text class="iconfont icon-aixin_shixin mr" style="color: #FF6C00;"></text>
								<text class="font24">上热门</text>
							</view> -->
							
							<view class="d-flex d-flex-middle pr-3 d-flex-between">
								<view class="d-flex d-flex-middle">
									<image @click="share(i)" class="ml-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%BD%AC%E5%8F%91.png" mode="widthFix" style="width: 30rpx; height: 30rpx;"></image>
								</view>
								<view class="d-flex d-flex-middle">
									<image v-if="!i.favorFlag" @click="changeLikeStatus(dex,i.id,i.blogId)" class="ml-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%88%B1%E5%BF%83.png" mode="widthFix" style="width: 35rpx; height: 35rpx;"></image>
									<image v-if="i.favorFlag" @click="changeLikeStatus(dex,i.id,i.blogId)" class="ml-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/heart-3-fill.png" mode="widthFix" style="width: 35rpx; height: 35rpx;"></image>
									<text class="color71 font26 ml-1">{{i.blogFavorCount}}</text>
								</view>
								<view class="d-flex d-flex-middle" @click="gotoDetail(i)">
									<image class="ml-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%AF%84%E8%AE%BA.png" mode="widthFix" style="width: 35rpx; height: 35rpx;"></image>
									<text class="color71 font26" style="margin-bottom: 1px;">{{(i.commentCount&&i.commentCount!=0)? i.commentCount : ''}}评论</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="px-1" v-if="ctype == 2">
				<view class="bg-fff rounded30 px-2 py-3">
					<view v-if="recordsData.length!=0" v-for="(i, dex) in recordsData" :key="i.id">
						<view class="d-flex d-flex-middle d-flex-between mb-1">
							<view class="d-flex d-flex-middle">
								<view class="img-bg d-flex d-flex-center d-flex-middle mr-1" style="position: relative;">
									<image @click="touser(i.uid)" :src="i.avatar" class="img-bg-img" mode="aspectFill"></image>
									<image v-if="i.dressedVoMap && i.dressedVoMap['1']" class="avatar-frame" :src="i.dressedVoMap['1'].icon"></image>
									
								</view>
								<view>
									<view>
									<view class="mb-1 font30">{{i.nickName}}</view>
									<!-- <view class="sex" style="position: absolute; width: 30rpx; height: 30rpx; bottom: 4rpx; right: 0;">
										<image v-if="$store.state.user.gender === 1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%94%B7.png" style="width: 100%; height: 100%;"></image>
										<image v-if="$store.state.user.gender === 2" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png" style="width: 100%; height: 100%;"></image>
									</view> -->
									</view>
									<view class="font24 color999">{{i.gmtCreated}}</view>
								</view>
							</view>
							<view class="d-flex d-flex-middle">
								<image @click="RemoteBrowsingHistory(dex,i.id,i.blogId)" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%85%B3%E9%97%AD.png" mode="widthFix" style="width: 40rpx; height: 40rpx;;"></image>
							</view>
						</view>
						
						<view class="pb-2" style="padding-left: 120rpx;">
							<view class="font26 mb-2">{{i.remark}}</view>
							<view class="mb-2 d-flex">
								<image  v-if="i.screenshot1" 
										:src="i.screenshot1"
										@load="ImgSize($event, dex)"
										@click="previwImage(dex, 0)"
										:class="['rounded15',{'MorePic':i.screenshot2&&!i.screenshot3},{'threePic':i.screenshot2&&i.screenshot3}]"
										:mode="i.screenshot2? 'aspectFill' : 'widthFix'" 
										:style="[{maxWidth: i.isLongChart? '420rpx' : '550rpx'}]"
								></image>
								<image  :class="['rounded15', 'ml-1', i.screenshot2&&!i.screenshot3? 'MorePic' : 'threePic']" 
										v-if="i.screenshot2" 
										:src="i.screenshot2" 
										mode="aspectFill"
										@click="previwImage(dex, 1)"
								></image>
								<image  :class="['rounded15', 'ml-1', 'mr-2', i.screenshot3? 'threePic' : '']" 
										v-if="i.screenshot3" 
										:src="i.screenshot3" 
										mode="aspectFill"
										@click="previwImage(dex, 2)"
								></image>
							</view>
							
							<view class="d-flex d-flex-middle pr-3 d-flex-between">
								<image @click="share(i)" class="ml-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%BD%AC%E5%8F%91.png" mode="widthFix" style="width: 30rpx; height: 30rpx;"></image>
								<view class="d-flex d-flex-middle">
									<image v-if="!i.favorFlag" @click="changeLikeStatus(dex,i.id,i.blogId)" class="ml-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%88%B1%E5%BF%83.png" mode="widthFix" style="width: 35rpx; height: 35rpx;"></image>
									<image v-if="i.favorFlag" @click="changeLikeStatus(dex,i.id,i.blogId)" class="ml-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/heart-3-fill.png" mode="widthFix" style="width: 35rpx; height: 35rpx;"></image>
									<text class="color71 font26 ml-1">{{i.blogFavorCount}}</text>
								</view>
								<view class="d-flex d-flex-middle" @click="gotoDetail(i)">
									<image class="ml-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%AF%84%E8%AE%BA.png" mode="widthFix" style="width: 35rpx; height: 35rpx;"></image>
									<text class="color71 font26" style="margin-bottom: 1px;">{{(i.commentCount&&i.commentCount!=0)? i.commentCount : ''}}评论</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<uni-popup ref="share" type="share" safeArea backgroundColor="#fff" border-radius="8px 8px 0 0">
				<view class="my-4 text-center">分享到</view>
				<view class="d-flex d-flex-between px-5 mb-4">
					<view class="d-flex-column d-flex-middle" @click="OnShare(1)">
						<image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1.png" style="width: 60rpx; height: 60rpx;"></image>
						<view class="mt-1 font24" style="color: #585858;">微信</view>
					</view>
					<view class="d-flex-column d-flex-middle" @click="OnShare(2)">
						<image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%9C%8B%E5%8F%8B%E5%9C%88.png" style="width: 60rpx; height: 60rpx;"></image>
						<view class="mt-1 font24" style="color: #585858;">朋友圈</view>
					</view>
					<view class="d-flex-column d-flex-middle" @click="OnShare(3)">
						<image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/QQ.png" style="width: 60rpx; height: 60rpx;"></image>
						<view class="mt-1 font24" style="color: #585858;">QQ好友</view>
					</view>
					<view class="d-flex-column d-flex-middle" @click="OnShare(4)">
						<image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/qq%E7%A9%BA%E9%97%B4.png" style="width: 60rpx; height: 60rpx;"></image>
						<view class="mt-1 font24" style="color: #585858;">QQ空间</view>
					</view>
					<view class="d-flex-column d-flex-middle" @click="OnShare(5)">
						<image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png" style="width: 60rpx; height: 60rpx;"></image>
						<view class="mt-1 font24" style="color: #585858;">小嗒好友</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</z-paging>
</template>

<script>
	import store from '@/store/index.js';
	import { blogApi } from '../../http/blogApi';
	import { TaskApi } from '../../http/taskApi';
	import TitleBarVue from '../../components/TitleBar.vue';
	export default {
		data() {
			return {
				ctype: 0,
				title: '我的记录',
				bgcolor:'transparent',
				recordsData: [],
				images: [],
				shareData: {
					href: "https://www.168802.xyz",
					title: "小嗒组队分享",
					summary: null,
					imageUrl: null
				}
			}
		},
		components: {TitleBarVue},
		methods: {
			async queryList(pageNo, pageSize){
				let tp = 2
				if(this.ctype === 0) {
					tp = 2
				}
				if(this.ctype === 1) {
					tp = 1
				}
				if(this.ctype === 2) {
					tp = 3
				}
				let params = {
					type: tp,
					pageIndex: pageNo,
					pageSize: pageSize,
				}
				let res = await blogApi.QueryBlogList(params)
				uni.hideLoading()
				res.records.forEach(i => {
					let addparams = {
						isLongChart: 1
					}
					i = Object.assign(i, addparams);
				})
				
				this.$refs.paging.complete(res.records);
			},
			// 上热门
			gotoPromotion() {
				uni.navigateTo({
					url: '/pagesApp/Promotion/Promotion'
				})
			},
			// 判断图片尺寸
			ImgSize(event, dex) {
				if(event.target.width > event.target.height) { // 横图
					this.recordsData[dex].isLongChart = 0
				}
			},
			// 图片预览
			previwImage(id, index) {
				if(this.recordsData[id].screenshot1) {
					this.images.push(this.recordsData[id].screenshot1)
				}
				if(this.recordsData[id].screenshot2) {
					this.images.push(this.recordsData[id].screenshot2)
				}
				if(this.recordsData[id].screenshot3) {
					this.images.push(this.recordsData[id].screenshot3)
				}
				uni.previewImage({
					current: index, // 当前显示图片索引
					urls: this.images,// 需要预览的图片http链接列表
				});
				this.images = []
			},
			// tab栏切换
			changType(type){
				this.ctype = type
				uni.showLoading({
					title: '加载中...'
				})
				this.$refs.paging.reload();
			},
			// 分享popup
			share(item) {
				this.shareData.imageUrl = item.screenshot1
				this.shareData.summary = item.remark
				this.$refs.share.open()
			},
			// 分享
			OnShare(type) {
				let that = this
				if(type === 1 || type === 2) {
					uni.share({
						provider: "weixin",
						scene: type===1? 'WXSceneSession' : 'WXSceneTimeline',
						type: 0,
						href: that.shareData.href,
						title: that.shareData.title,
						summary: that.shareData.summary,
						imageUrl: that.shareData.imageUrl? that.shareData.imageUrl : 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png',
						success: function (res) {
							console.log("success:" + JSON.stringify(res));
							that.getTaskList(21);
						},
						fail: function(err) {
							let failData = JSON.parse(JSON.stringify(err))
							console.log(failData);
							if(failData.code == -8) {
								uni.showToast({
									title: '客户端未安装',
									icon: 'none',
									duration: 1500
								})
							} else if(failData.code == -100) {
								console.log('客户端安装了，但是没有登录，用户返回后的状态');
							} else {
								uni.showToast({
									title: failData,
									icon: 'none',
									duration: 1500
								})
							}
						}
					});
					that.$refs.share.close()
					setTimeout(() => {
						uni.showTabBar()
					},250)
				}
				if(type === 3 || type === 4) {
					uni.share({
						provider: "qq",
						scene: type===3? 'WPA' : 'QZONE',
						type: 0,
						href: that.shareData.href,
						title: that.shareData.title,
						summary: that.shareData.summary,
						imageUrl: that.shareData.imageUrl? that.shareData.imageUrl : 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png',
						success: function (res) {
							console.log("success:" + JSON.stringify(res));
							that.getTaskList(21);
						},
						fail: function(err) {
							let failData = JSON.parse(JSON.stringify(err))
							if(failData.code == -2) {
								return
							}
							uni.showToast({
								title: failData,
								icon: 'none',
								duration: 1500
							})
						}
					});
					that.$refs.share.close()
					setTimeout(() => {
						uni.showTabBar()
					},250)
				}
				if(type === 5) {
					uni.showToast({
						title:'此功能暂未开发！',
						icon:'none',
					})
					that.$refs.share.close()
					setTimeout(() => {
						uni.showTabBar()
					},250)
				}
			},
			async getTaskList(taskid) {
				let params = {
					id: taskid
				}
				let res = await TaskApi.getTaskList(params)
				if(res.records[0].receiveFlag) return
				this.receiveTask(taskid);
			},
			async receiveTask(id) {
				let params = {
					taskId: id
				}
				let res = await TaskApi.ReceiveTask(params).then(() => {
					this.finishTask(id);
				})
			},
			async finishTask(id) {
				let params = {
					taskId: id
				}
				let res = await TaskApi.FinishTask(params);
				console.log('任务完成！');
			},
			goback() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 跳转到详情页
			gotoDetail(item) {
				let data = JSON.stringify(item)
				uni.navigateTo({
					url: '/pagesMain/detail/detail?data='+data
				})
			},
			// 点赞 / 取消点赞
			async changeLikeStatus(index, id, blogId) {
				console.log(this.recordsData[index]);
				this.recordsData[index].favorFlag = this.recordsData[index].favorFlag? 0 : 1
				if(this.recordsData[index].favorFlag) {
					this.recordsData[index].blogFavorCount++
				} else {
					this.recordsData[index].blogFavorCount--
				}
				let params = {
					type: 1,
					flag: this.recordsData[index].favorFlag? true : false,
					blogId: blogId
				}
				let res = await blogApi.LikeAndComment(params)
			},
			// 收藏 / 取消收藏
			async changeFavorStatus(index, id, blogId) {
				this.recordsData[index].collectFlag = this.recordsData[index].collectFlag? 0 : 1
				let params = {
					type: 2,
					flag: this.recordsData[index].collectFlag? true : false,
					blogId: blogId
				}
				let res = await blogApi.LikeAndComment(params)
			},
			// 删除浏览记录
			async RemoteBrowsingHistory(index, id, blogId) {
				this.recordsData.splice(index, 1);
				let params = {
					type: 3,
					flag: false,
					blogId: blogId
				}
				let res = await blogApi.LikeAndComment(params)
			},
			// 跳转至用户主页
			touser(uid){
				if(uid === this.$store.state.user.uid){
					return
				}
				uni.navigateTo({
				    url: `/pagesMain/HomePage/HomePage?id=${uid}`
				});
			}
		},
		computed: {
			titleTop() {
				return this.$store.state.statusBarHeight + 40 + 'px'
			}
		}
	}
</script>

<style scoped lang="scss">
	.avatar-frame {
	  position: absolute;
	
	   width: 120rpx; /* 比头像大 20rpx */
	   height: 120rpx; /* 比头像大 20rpx */
	  z-index: 2;  /* 调整层级 */
	  pointer-events: none;
	}
.main {
	background: #fff;
	.content {
		width: 100%;
		background-color: #fff !important;
	}
}
.pt-300 {
	padding-top: 300rpx;
}
.tabbar {
	width: 100%;
	height: 120rpx;
	display: flex;
	background-color: #fff;
	align-items: center;
	padding-left: 30rpx;
	.item {
		width: 120rpx;
		height: 55rpx;
		line-height: 55rpx;
		border: 1px solid transparent;
		text-align: center;
		color: #6f6f6f;
		font-size: 30rpx;
		margin-right: 20rpx;
	}
}
.current {
	border-radius: 30rpx;
	border: 1px solid #46c5fc !important;
	background-color: #cfeffa;
}
.img-bg{
	width: 100rpx;
	height: 100rpx;
	border-radius: 120rpx;
	background-image: linear-gradient(to top, #fab452, #9d41d3);
}
.img-bg-img{
	height: 85rpx;
	width: 85rpx;
	border-radius: 100rpx;
	border: solid 5rpx #fff;
}
.aixin{
	background: #FFA5DF;
	width: 110rpx;
}
.z-index-90 {
	z-index: 90;
}
.MorePic {
	width: 200rpx;
	height: 200rpx;
}
.threePic {
	width: 200rpx;
	height: 180rpx;
}
</style>
